<template>
  <div class="user" @mouseover="show_tools" @mouseleave="hide_tools">
    <div class="avatar" :style="`background-image: url('${this.$request.baseURL}${ userinfo.avatar}');`"></div>

    <div class="username">{{ userinfo.username }}</div>

    <div class="tools" v-if="show">
      <router-link class='item' to="personal">个人中心</router-link>
<!--      <div class="item" @click="navigatorTo">个人中心</div>-->
      <div class="item" @click="logout">退出</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Avatar',
  data() {
    return {
      userinfo: {},
      show: false,
    };
  },
  created() {
    this.userinfo = this.$store.getters.userinfo;

    let self = this;
    this.channels.$on('update_avatar', function () {
      self.userinfo = self.$store.getters.userinfo;
    });
  },
  methods: {
    show_tools () {
      this.show = true;
    },
    hide_tools() {
      this.show = false;
    },
    navigatorTo() {
      this.$router.push({path: '/personal'})
    },
    logout() {
      this.$request.exec('post', 'logout', null, this);
      this.$router.push({name: 'Login'})
    }
  }
};
</script>

<style scoped>
.user {
  margin-right: 2vw;
  position: absolute;
  right: 0;
  top: .9vw;
  cursor: pointer;
  min-width: 10.5vw;
}

.user * {
  font-family: PingFang-SC-Bold;
}

.user .username,
.user .avatar {
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  width: 3.5vw;
  height: 3.5vw;
  border-radius: 100%;
  overflow: hidden;
  background-size: 110%;
  background-position: center center;
  border: .25vw solid #3275c4;
  margin-right: 1vw;
  user-select: none;

}

.username {
  font-size: 1.2vw;
}

.tools {
  text-align: center;
  width: 100%;
  padding-top: .2vw;
}

.tools .item {
  border-bottom: .1vh solid #000;
  padding: .6vw 0;
  font-size: .9vw;
  background: url('../assets/index/c.png') 0 0 / 100% 100%;
  display: block;
  color: #fff;
}

.tools .item:hover {
  border-bottom: .1vh solid #000;
  padding: .6vw 0;
  font-size: .9vw;
  background: url('../assets/index/chover.png') 0 0 / 100% 100%;
  text-decoration: none;
}
</style>
